@import '~antd/lib/style/themes/default.less';
@import '../../utils/utils.less';
@customScroll: {
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
  }

  &:hover::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 53%, 0.4);
  }

  &:hover::-webkit-scrollbar-track {
    background: hsla(0, 0%, 53%, 0.1);
  }
};
.clearAvatar {
  :global {
    .ant-card-meta-avatar {
      padding-right: 0px !important;
    }
  }
}
.cardList {
  margin-bottom: -24px;

  .card {
    :global {
      .ant-card-meta-title {
        margin-bottom: 2px;

        & > a {
          color: @heading-color;
        }
      }

      .ant-card-actions {
        background: #f7f9fa;
      }

      .ant-card-body:hover {
        .ant-card-meta-title > a {
          color: @primary-color;
        }
      }
    }
  }
}
.cards {
  :global {
    .ant-card-actions > li > span {
      width: 100%;
    }

    .ant-card-meta-title {
      margin-bottom: 2px;

      & > a {
        color: @heading-color;
      }
    }

    .ant-card-actions {
      background: #f7f9fa !important;
    }

    .ant-card-body:hover {
      .ant-card-meta-title > a {
        color: @primary-color;
      }
    }
  }
}
.extraImg {
  margin-top: -60px;
  text-align: center;
  width: 195px;

  img {
    width: 100%;
  }
}

.newButton {
  background-color: #fff;
  border-color: @border-color-base;
  border-radius: @border-radius-sm;
  color: @text-color-secondary;
  width: 100%;
  height: 188px;
}

.CardMeta {
  :global {
    .ant-card-meta-avatar {
      padding-right: 0 !important;
    }
  }
}

.cardTitle {
  color: #1890ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardTitle span:nth-child(1) {
  display: inline-block;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardVersion {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memoryStyle {
  height: 26px;
  line-height: 26px;
  display: flex;
  align-items: center;

  & > span {
    width: 48px;
    display: inline-block;
  }

  & > a {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.shareNameStyle {
  height: 26px;
  line-height: 26px;
  display: flex;
  align-items: center;

  & > span {
    width: 58px;
    display: inline-block;
  }

  & > a {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.cardVersionTagStyle {
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.cardVersionListStyle {
  overflow-x: hidden;
}

.cardVersionStyle {
  display: flex;
  height: 26px;
  line-height: 26px;

  & > span {
    width: 46px;
    display: inline-block;
  }

  .overScroll::-webkit-scrollbar {
    width: 6px;
    height: 12px;
    background-color: #f5f5f5;
  }

  /*定义滚动条轨道
     内阴影+圆角*/
  .overScroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  /*定义滑块
     内阴影+圆角*/
  .overScroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
  }

  .overScroll {
    width: 67%;

    & > div {
      height: 26px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      @customScroll();
      :global {
        .ant-tag {
          padding: 0 5px !important;
          height: 20px;
          margin-top: 3px;
          margin-bottom: 3px;
        }
      }

      & > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.cardsMetas {
  height: 112px;
  @customScroll();
}

.cardAvatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}

.cardDescription {
  .textOverflowMulti();
}

.pageHeaderContent {
  position: relative;
}

.contentLink {
  margin-top: 16px;

  a {
    margin-right: 32px;

    img {
      width: 24px;
    }
  }

  img {
    vertical-align: middle;
    margin-right: 8px;
  }
}

@media screen and (max-width: @screen-lg) {
  .contentLink {
    a {
      margin-right: 16px;
    }
  }
}

@media screen and (max-width: @screen-md) {
  .extraImg {
    display: none;
  }
}

@media screen and (max-width: @screen-sm) {
  .stepDescription {
    left: 8px;
  }
  .pageHeaderContent {
    padding-bottom: 30px;
  }

  .contentLink {
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 1000px;

    a {
      margin-right: 16px;
    }

    img {
      margin-right: 4px;
    }
  }
}

.configGroup {
  span {
    margin-right: 16px;
    display: inline-block;
  }
}

.headerList {
  margin-bottom: 4px;
}

.tabsCard {
  margin-bottom: 24px;

  :global {
    .ant-card-head {
      padding: 0 16px;
    }
  }
}

.noData {
  color: @disabled-color;
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.heading {
  color: @heading-color;
  font-size: 20px;
}

.stepDescription {
  font-size: 14px;
  position: relative;
  left: 38px;

  & > div {
    margin-top: 8px;
    margin-bottom: 4px;
  }
}

.textSecondary {
  color: @text-color-secondary;
}
